<template>
  <div class="home">
    <div class="menu">
      <a-menu 
        :defaultSelectedKeys="['1']" 
        mode="inline" theme="dark" 
        :inlineCollapsed="false"
        style="height:600px"
        @click="switchItem"
      >
        <a-menu-item style="padding-left:0px">
            <a-avatar shape="square" :src="userImage" icon="user" />
        </a-menu-item>
        <a-menu-item key="1">
          <a-icon style="font-size: 24px;" type="message" />
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon style="font-size: 24px;" type="contacts" />
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon style="font-size: 24px;" type="customer-service" />
        </a-menu-item>
      </a-menu>
    </div>
    <div class="content" >
        <component :is="content"></component>
    </div>
  </div>
</template>

<script>
import Chat from './Chat.vue';
import MailList from './MailList.vue';
import Music from './Music.vue';
export default {
    data() {
        return {
            content: 'Chat',
            userImage: null,
        }
    },
    components: {
        Chat,
        MailList,
        Music,
    },
    methods: {
        switchItem(e) {
            switch (e.key) {
                case '1':
                    this.content = 'Chat';
                    break;
                case '2':
                    this.content = 'MailList';
                    break;
                case '3':
                    this.content = 'Music';
                    break;
                default:
                    break;
            }
        }
    },
    mounted() {

    }
}
</script>

<style>
.home {
    position: relative;
    width: 800px;
    margin: 10px auto;
}
.home .menu{
    width: 80px;
    height: 800px;
    float: left;
}
.home .content{
    width: 720px;
    height: 600px;
    background-color: gray;
    float: right;
}
</style>